<template>
  <div class="daohang">
    <van-row type="flex" justify="space-around">
      <van-col span="7" v-for="(item,index) in arr" :key="index" @click="list(index)">
        <div class="remen">{{item}}</div>
      </van-col>
    </van-row>
    <div class="card" v-for="item in arrlist" :key="item.id" @click="godetail(item.id)">
      <van-card :price="item.price" desc="描述信息" :title="item.goodsname" :thumb="$pre+item.img" />
      <van-button type="primary">添加购物车</van-button>
    </div>
  </div>
</template>

<script>
import { reqHomeGoods } from "../../../../http/api.js";
export default {
  data() {
    return {
      arr: ["热门推荐", "上新推荐", "所有商品"],
      arrlist: []
    };
  },
  methods: {
    list(index) {
      reqHomeGoods().then(res => {
        this.arrlist = res.data.list[index].content;
      });
    },
    godetail(id){
      this.$router.push("/foodDetail?id="+id)
    }
  },
  mounted() {
    reqHomeGoods().then(res => {
      this.arrlist = res.data.list[0].content;
    });
  }
};
</script>

<style scoped>
.daohang {
  margin-bottom: 3rem;
}
.daohang .remen {
  background: #fea613;
  text-align: center;
  padding: 10px;
}
.card {
  margin: 20px 0;
}
</style>